<template>
  <div class="matchGround">
    <div class="row">
      <!--自己的信息-->
      <div class="col-4">
        <div class="user-photo">
          <img :src="$store.state.user.photo">
        </div>
        <div class="user-username">
          {{ $store.state.user.username }}
        </div>
      </div>
      <!--bot的选择框-->
      <div class="col-4">
        <div class="user_select_bot">
          <select class="form-select" v-model="select_bot" aria-label="Default select example">
            <option selected value="-1">亲自出马</option>
            <option v-for="bot in bots" :key="bot.id" :value="bot.id">
              {{ bot.title }}
            </option>
          </select>
        </div>
      </div>
      <!--敌人的信息-->
      <div class="col-4">
        <div class="user-photo">
          <img :src="$store.state.pk.opponent_photo" alt="无法显示">
        </div>
        <div class="user-username">
          {{ $store.state.pk.opponent_name }}
        </div>
      </div>
      <div class="col-12" style="text-align: center; padding-top:10vh">
        <button type="button" @click="change_match_btn" class="btn btn-primary btn-lg">{{ match_btn_info }}</button>
      </div>
    </div>
  </div>
</template>

<script>
//用户匹配界面
import {ref} from 'vue';
import {useStore} from 'vuex';
import $ from "jquery";

export default {
  name: "MatchGround",
  setup() {
    const store = new useStore();
    let match_btn_info = ref("开始匹配");
    let bots = ref([]);
    let select_bot = ref("-1");     //绑定用户提交的bot选择

    //获取Bot列表
    const refresh_bots = () => {
      $.ajax({
        url: '/api/user/bot/getlist/',
        type: 'get',
        headers: {
          Authorization: 'Bearer ' + store.state.user.token
        },
        success(resp) {
          bots.value = resp;        //返回的数据也是列表,所以直接赋值
        }, error(resp) {
          console.log(resp);
        }
      })
    }
    refresh_bots();   // 从云端动态获取bots

    //改变匹配按钮内容
    let change_match_btn = () => {
      if (match_btn_info.value === "开始匹配") {
        match_btn_info.value = "取消";
        //前端向后端发送请求：store.state.pk.socket.send(字符串);
        store.state.pk.socket.send(JSON.stringify({
          event: "start matching",
          bot_id: select_bot.value
        }))
      } else {
        match_btn_info.value = "开始匹配";
        store.state.pk.socket.send(JSON.stringify({
          event: "stop matching"
        }))
      }
    }

    return {
      store,
      match_btn_info,
      change_match_btn,
      bots,
      select_bot
    }
  }
}
</script>

<style scoped>
div.matchGround {
  width: 60vw;
  height: 70vh;
  margin: 40px auto;
  background-color: rgba(50, 50, 50, 0.5);
}

div.user-photo {
  text-align: center;
  padding-top: 10vh;
}

div.user-photo > img {
  border-radius: 50%;
  height: 20vh;
}

div.user-username {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: white;
  padding-top: 2vh;
}

div.user_select_bot {
  margin: 0 auto;
  padding-top: 10vh;
}

div.user_select_bot > select {
  width: 80%;
  margin: 0 auto;
}
</style>